<template>
  <view class="flex flex-col h-page bg-#f5f5f5">
    <!-- 连接状态卡片 -->
    <view
      class="mx-30rpx mt-20rpx rounded-20rpx bg-fuchsia-400 p-40rpx shadow-lg"
    >
      <view class="flex flex-row justify-between items-center">
        <!-- 蓝牙图标 -->
        <view
          class="bg-white rounded-full w-140rpx h-140rpx flex items-center justify-center mb-30rpx"
        >
          <image
            src="../../static/蓝牙.png"
            :style="{
              width: '80rpx',
              height: '80rpx',
            }"
            mode="scaleToFill"
          />
        </view>

        <view class="flex flex-col items-center">
          <!-- 连接状态 -->
          <text class="text-white text-36rpx mb-20rpx" v-if="name">已连接</text>
          <text class="text-white text-30rpx mb-40rpx" v-if="name">
            当前:{{ name }}
          </text>
          <!-- 断开按钮 -->
          <view
            class="bg-white rounded-full px-60rpx py-20rpx"
            v-if="name"
            @click="cleanBluetooth"
          >
            <text class="text-fuchsia-400 text-30rpx">点击断开</text>
          </view>

          <!-- 连接设备按钮 -->
          <view
            v-else
            @click="toPage('/pages/bluetooth/index')"
            class="bg-white rounded-full px-60rpx py-20rpx mt-40rpx flex flex-col"
          >
            <text class="text-fuchsia-400 text-30rpx">即刻启程</text>
            <text class="text-fuchsia-400 text-20rpx">Ready to depart</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能区域 -->
    <view
      class="relative mt-40rpx grid grid-cols-2 justify-center items-center gap-20rpx w-full"
    >
      <view
        class="w-260rpx h-260rpx bg-violet-500 rounded-20rpx p-30rpx shadow-md m-12rpx"
        @click="toPage('/pages/shake/index')"
      >
        <view class="flex flex-col h-full">
          <view class="mb-auto">
            <text class="text-white text-36rpx block">我的模式</text>
            <text class="text-white text-28rpx opacity-80">My Model</text>
          </view>
          <view class="flex justify-start">
            <image
              src="../../static/shake1.png"
              mode="widthFix"
              class="w-140rpx h-140rpx"
            />
          </view>
        </view>
      </view>

      <!-- 右上角卡片 - 分享遥控 -->
      <view
        class="w-260rpx h-260rpx bg-blue-400 rounded-20rpx p-30rpx shadow-md flex flex-col justify-end items-end m-12rpx"
        @click="toPage('/pages/sliding/index')"
      >
        <view class="flex flex-col items-end w-full h-full">
          <view class="mb-auto w-full flex-col items-end">
            <view class="w-full text-white text-36rpx block text-right"
              >点一点</view
            >
            <view class="w-full text-white text-28rpx opacity-80 text-right"
              >Pount it</view
            >
          </view>
          <view class="flex justify-end">
            <image
              src="../../static/share.png"
              mode="widthFix"
              class="w-140rpx h-140rpx"
            />
          </view>
        </view>
      </view>

      <!-- 左下角卡片 - 滑一滑 -->
      <view
        class="w-260rpx h-260rpx bg-orange-400 rounded-20rpx p-30rpx shadow-md m-12rpx"
        @click="toPage('/pages/teach/index')"
      >
        <view class="flex flex-col justify-end h-full">
          <view class="flex justify-start">
            <image
              src="../../static/sliding.png"
              mode="widthFix"
              class="w-140rpx h-140rpx"
            />
          </view>
          <view class="mb-auto">
            <text class="text-white text-36rpx block">使用教程</text>
            <text class="text-white text-28rpx opacity-80">Instructions</text>
          </view>
        </view>
      </view>

      <!-- 右下角卡片 - 使用说明 -->
      <view
        class="w-260rpx h-260rpx bg-fuchsia-400 rounded-20rpx p-30rpx shadow-md m-12rpx"
        @click="toPage('/pages/classic/index')"
      >
        <view class="flex flex-col justify-end items-end w-full h-full">
          <view class="flex justify-start">
            <image
              src="../../static/instructions.png"
              mode="widthFix"
              class="w-140rpx h-140rpx"
            />
          </view>
          <view class="mb-auto w-full flex-col items-end">
            <view class="w-full text-white text-36rpx block text-right"
              >分享遥控</view
            >
            <view class="w-full text-white text-28rpx opacity-80 text-right"
              >Share</view
            >
          </view>
        </view>
      </view>

      <!-- 中间圆形按钮 -->
      <view
        class="absolute top-250rpx left-250rpx w-260rpx h-260rpx"
        @click="toPage('/pages/classic/index')"
      >
        <view
          class="w-full h-full bg-#f5f5f5 rounded-full flex items-center justify-center"
        >
          <view
            class="w-180rpx h-180rpx bg-red-500 rounded-full flex flex-col items-center justify-center"
          >
            <text class="i-carbon-star text-40rpx text-white mb-10rpx"></text>
            <text class="text-white text-30rpx">经典模式</text>
            <text class="text-white text-24rpx opacity-80">Model</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

const deviceId = ref("");
const serviceId = ref("");
const characteristicId = ref("");
const name = ref("");
const advertisServiceUUIDs = ref([]);

const cleanBluetooth = () => {
  deviceId.value = "";
  serviceId.value = "";
  characteristicId.value = "";
  name.value = "";
  advertisServiceUUIDs.value = [];

  uni.setStorageSync("deviceId", "");
  uni.setStorageSync("serviceId", "");
  uni.setStorageSync("characteristicId", "");
  uni.setStorageSync("name", "");
  uni.setStorageSync("advertisServiceUUIDs", "");

  uni.closeBluetoothAdapter({
    success: (res) => {
      console.log("关闭蓝牙适配器成功", res);
    },
    fail: (err) => {
      console.log("关闭蓝牙适配器失败", err);
    },
  });
};

const toPage = (url) => {
  // 蓝牙页面不需要检查deviceId
  if (url !== '/pages/bluetooth/index' && url !== '/pages/teach/index') {
    if (!deviceId.value) {
      uni.showToast({
        title: '请先连接蓝牙设备',
        icon: 'none'
      });
      return;
    }
  }
  uni.navigateTo({ url });
};

onShow(() => {
  deviceId.value = uni.getStorageSync("deviceId") || "";
  serviceId.value = uni.getStorageSync("serviceId") || "";
  characteristicId.value = uni.getStorageSync("characteristicId") || "";
  name.value = uni.getStorageSync("name") || "";
  advertisServiceUUIDs.value = uni.getStorageSync("advertisServiceUUIDs") || [];
});
</script>

<style>
/* 布局相关 */
.flex {
  display: flex;
}

.text-20rpx {
  font-size: 20rpx;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.h-page {
  height: calc(100vh - 88rpx);
}

.w-full {
  width: 100%;
}

/* 定位相关 */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

/* .left-1/2 {
  left: 50%;
}

.top-1/2 {
  top: 50%;
} */

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* 边距相关 */
.mx-30rpx {
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.mt-20rpx {
  margin-top: 20rpx;
}

.mt-40rpx {
  margin-top: 40rpx;
}

.mb-10rpx {
  margin-bottom: 10rpx;
}

.mb-20rpx {
  margin-bottom: 20rpx;
}

.mb-30rpx {
  margin-bottom: 30rpx;
}

.mb-40rpx {
  margin-bottom: 40rpx;
}

.mb-auto {
  margin-bottom: auto;
}

.m-12rpx {
  margin: 12rpx;
}

.px-60rpx {
  padding-left: 60rpx;
  padding-right: 60rpx;
}

.py-20rpx {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.p-30rpx {
  padding: 30rpx;
}

.p-40rpx {
  padding: 40rpx;
}

/* 背景颜色相关 */
.bg-#f5f5f5 {
  background-color: #f5f5f5;
}

.bg-fuchsia-400 {
  background-color: #e879f9;
}

.bg-violet-500 {
  background-color: #8b5cf6;
}

.bg-blue-400 {
  background-color: #3b82f6;
}

.bg-orange-400 {
  background-color: #fb923c;
}

.bg-red-500 {
  background-color: #ef4444;
}

.bg-white {
  background-color: #fff;
}

/* 边框相关 */
.rounded-20rpx {
  border-radius: 20rpx;
}

.rounded-full {
  border-radius: 9999px;
}

/* 阴影相关 */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 文字相关 */
.text-white {
  color: #fff;
}

.text-fuchsia-400 {
  color: #e879f9;
}

.text-80rpx {
  font-size: 80rpx;
}

.text-36rpx {
  font-size: 36rpx;
}

.text-30rpx {
  font-size: 30rpx;
}

.text-28rpx {
  font-size: 28rpx;
}

.text-24rpx {
  font-size: 24rpx;
}

.text-40rpx {
  font-size: 40rpx;
}

.block {
  display: block;
}

.text-right {
  text-align: right;
}

.opacity-80 {
  opacity: 0.8;
}

/* 尺寸相关 */
.w-260rpx {
  width: 260rpx;
}

.h-260rpx {
  height: 260rpx;
}

.w-140rpx {
  width: 140rpx;
}

.h-140rpx {
  height: 140rpx;
}

.w-180rpx {
  width: 180rpx;
}

.h-180rpx {
  height: 180rpx;
}

/* 间隔相关 */
.gap-20rpx {
  gap: 20rpx;
}

.top-250rpx {
  top: 250rpx;
}

.left-250rpx {
  left: 250rpx;
}
</style>
